import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { StyleHeader } from './styled'
import { Icon } from 'antd-mobile';
@withRouter
class Header extends Component {
  gotoArea = () => {
    this.props.history.push('/area')
  }
  gotoSearch = () => {
    this.props.history.push('/cinemas/search')
  }
  render() {
    return (
      <StyleHeader>
        <div className='area' onClick={this.gotoArea}>
          <span className='city' style={{textAlign:'center'}}>地区</span>
          <Icon type='down' size='xxs' />
        </div>
        <div className='title'>
          {this.props.children}
        </div>
        {
          this.props.search?<div className='zhanwei' onClick={this.gotoSearch} ><Icon type="search" size='md' /></div>:<div className='zhanwei'></div>
        }
      </StyleHeader>
    );
  }
}

export default Header;